{extend name="../public/header" /}
{block name="body"}
<body>
{include file="../public/top" uname="$roleInfo.uname" lv="$roleInfo.ulv" ls="$roleInfo.uyxb" jp="$roleInfo.uczb" /}
<div class="subject main">
    <div class="layui-row">
        <div class="content">
            <div class="current">
                <span class="position">{$roleInfo.map.mname}</span>
                <span class="state">{if $roleInfo.map.ispvp==0}[安全区]{else/}[PVP]{/if}</span>
                <span class="info ajax-goto" data-url="{:url('home/index')}">逃跑</span>
            </div>
            <div class="refine">
                <div class="mster">
                    <div class="layui-row layui-col-space15" style="margin-bottom: 10px;">
                        <input type="hidden" name="str" id="str" value="{$str}">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">[Lv:{$infoMonster.glv}] {$infoMonster.gname}</div>
                                <div class="layui-card-body">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar layui-bg-red" lay-percent="{$infoMonster.ghp}/{$infoMonster.gmaxhp}"></div>
                                    </div>
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true" style="margin-top: 5px;">
                                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0/0"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">[Lv:{$infoRole.ulv}] {$infoRole.uname}</div>
                                <div class="layui-card-body">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar layui-bg-red" lay-percent="{$infoRole.uhp}/{$infoRole.umaxhp}"></div>
                                    </div>
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true" style="margin-top: 5px;">
                                        <div class="layui-progress-bar layui-bg-blue" lay-percent="{$infoRole.ump}/{$infoRole.umaxmp}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">信息</div>
                            <div class="layui-card-body">
                                {volist name='$list' id='vo' key='k'}
                                <p>{$vo}</p>
                                {/volist}
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12 pve">
                        <div class="layui-card">
                            <div class="layui-card-header">操作</div>
                            <div class="layui-card-body">
                                <p><a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs ajax-battle" data-type="attack">普攻</a></p>
                                <p style="display: none">
                                    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">法术</a>：
                                    <span>{$infoRole.jn1}</span>
                                    <span>{$infoRole.jn2}</span>
                                    <span>{$infoRole.jn3}</span>
                                </p>
                                <p>
                                    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">药品</a>：
                                    <span class="ajax-battle" data-type="drug" data-id="{$infoRole.yp1|default='0'}">{$infoRole.yp1_name}</span>
                                    <span class="ajax-battle" data-type="drug" data-id="{$infoRole.yp2|default='0'}">{$infoRole.yp2_name}</span>
                                    <span class="ajax-battle" data-type="drug" data-id="{$infoRole.yp3|default='0'}">{$infoRole.yp3_name}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
{/block}
{block name="script"}
<script>
    layui.use(['jquery', 'form', 'layajax', 'upload', 'flow', 'element', 'layer'], function () {
        var $ = layui.jquery
            , layajax = layui.layajax
            , upload = layui.upload
            , element = layui.element
            , flow = layui.flow
            , form = layui.form
            , layer = layui.layer;

        $('.ajax-battle').on('click', function () {
            var obj = $(this);
            var type = obj.data('type');
            var id = obj.data('id');
            var str = $('#str').val();

            var url = '{:url("battle")}';
            console.log('url', url);

            var map = {};
            map['type'] = type;
            map['str'] = str;

            if(type=='drug' || type=='sorcery'){
                if(id==0){
                    layer.msg('技能或药品不存在',{time:1000});
                    return false;
                }
                map['target_id'] = id;
            }

            $.post(url, map, function (res) {
                if (res.code == undefined) {
                    console.log('res为json字符串', res);
                    res = JSON.parse(res);
                } else {
                    console.log('res为json对象', res);
                }
                if (res.code == 1) {
                    layer.msg(res.msg,{time:1000}, function(index){
                        location.reload();
                    });
                }else if(res.code == 2){
                    //显示自动关闭倒计秒数
                    layer.alert(res.msg, {
                        time: 5*1000
                        ,success: function(layero, index){
                            var timeNum = this.time/1000, setText = function(start){
                                layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                            };
                            setText(!0);
                            this.timer = setInterval(setText, 1000);
                            if(timeNum <= 0) clearInterval(this.timer);
                        }
                        ,end: function(){
                            clearInterval(this.timer);
                            window.location.href = res.data.url;
                        }
                    });
                } else {
                    layer.msg(res.msg);
                }
            });
        });

        form.render();
    });
</script>
{/block}